<template>
  <div class="home">
      <Head :currentpage="i"></Head>
      <div class="banner">
        <ul>
            <li class="show"><img src="../assets/home_banner1.jpg" alt=""></li>
            <li><img src="../assets/home_banner2.jpg" alt=""></li>
            <li><img src="../assets/home_banner3.jpg" alt=""></li>
        </ul>
        <div class="item">
            <span class="active1"></span>
            <span></span>
            <span></span>
        </div>
        <img src="../assets/bolang.png" alt="">
    </div>
    <div class="body">
        <div class="body1">
            <div class="section">
                <p class="mainhead">用心成就未来</p>
                <p class="subtitle">让生活变得更简单，便捷</p>
            </div>
            <div class="body1-3">
                <div class="body-1-3-i it1">
                    <div class="F"></div>
                    <div class="B"></div>
                    <p>团队合作</p>
                </div>
                <div class="body-1-3-i it2">
                    <div class="F"></div>
                    <div class="B"></div>
                    <p>敢于拼搏</p>
                </div>
                <div class="body-1-3-i it3">
                    <div class="F"></div>
                    <div class="B"></div>
                    <p>不断创新</p>
                </div>
                <div class="body-1-3-i it4">
                    <div class="F"></div>
                    <div class="B"></div>
                    <p>深入反思</p>
                </div>
            </div>
        </div>
        <div class="body2">
            <div class="section b2section">
                <p class="mainhead body2head">我们的项目</p>
                <p class="subtitle body2head">让我们携手前行，共创未来</p>
            </div>
            <div class="body2-content">
                <div class="b2c-bg">
                    <p>来捡钱</p>
                    <p>每天随手一点 红包抢到手软</p>
                </div>
                <img src="../assets/M1list_postop_a_04.png" alt="">
            </div>
        </div>
        <div class="body3">
            <div class="section">
                <p class="mainhead">走进我们</p>
                <p class="subtitle">憧憬更高更远的未来，不断前行</p>
            </div>
            <div class="b3-content">
                <div class="b3c1">
                    <div class="b3c1-up">
                        <div></div>
                        <p>发展目标</p>
                        <p>成为中国领先的互联网企业</p>
                    </div>
                    <div class="b3c1-down">
                        <div class="b3c1d-text">发展目标</div>
                    </div>
                </div>
                <div class="b3c1">
                    <div class="b3c1-up">
                        <div></div>
                        <p>发展目标</p>
                        <p>成为中国领先的互联网企业</p>
                    </div>
                    <div class="b3c1-down">
                        <div class="b3c1d-text">发展目标</div>
                    </div>
                </div>
                <div class="b3c1">
                    <div class="b3c1-up">
                        <div></div>
                        <p>发展目标</p>
                        <p>成为中国领先的互联网企业</p>
                    </div>
                    <div class="b3c1-down">
                        <div class="b3c1d-text">发展目标</div>
                    </div>
                </div>
                <div class="b3c1">
                    <div class="b3c1-up">
                        <div></div>
                        <p>发展目标</p>
                        <p>成为中国领先的互联网企业</p>
                    </div>
                    <div class="b3c1-down">
                        <div class="b3c1d-text">发展目标</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body4">
            <div class="section">
                <p class="mainhead">合作伙伴</p>
                <p class="subtitle">成功路上有我，也有你</p>
            </div>
            <div class="content"></div>
        </div>
    </div>
      <Foot></Foot>
  </div>
</template>

<script>
import Head from "@/components/head.vue";
import Foot from "@/components/foot.vue";

export default {
  name: "Home",
  data(){
    return{
      i:1,
    }
  },
  components: {
    Head,
    Foot
  },
};
</script>
<style scoped>
.banner {
    width: 100%;
    height: 530px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.banner ul {
    width: 100%;
    height: 100%;
}

.banner ul li {
    display: none;
    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
}

.banner ul .show {
    display: list-item;
}

.banner ul li img {
    width: 100%;
    height: 100%;
}

.banner .item {
    position: absolute;
    bottom: 35px;
    display: flex;
    justify-content: space-around;
    width: 200px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.banner .item span {
    width: 30%;
    height: 3px;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
}

.banner .item .active1:before {
    content: '';
    display: inline-block;
    background-color: #ff0;
    position: absolute;
    width: 60px;
    height: 4px;
    left: -60px;
    animation: Move 3s linear 0s 1;
}

@keyframes Move {
    from {
        left: -60px;
    }

    to {
        left: 0px;
    }
}

.banner>img {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

.body1,
.body2,
.body3,
.body4 {
    height: 600px;
}

.section {
    text-align: center;
    padding: 100px 0 40px 0;
}

.section .mainhead {
    font-size: 28px;
    color: #333;
    padding-bottom: 30px;
}

.section .subtitle {
    font-size: 18px;
    color: #999;
}

.body1-3 {
    width: 1200px;
    height: 240px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}

.body-1-3-i {
    width: 200px;
    height: 250px;
    text-align: center;
    padding-bottom: 10px;
    box-shadow: 0 0 4px 0 #fff;
    position: relative;
}

.body-1-3-i>p {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

.body-1-3-i .F,
.body-1-3-i .B {
    position: absolute;
    backface-visibility: hidden;
    width: 200px;
    height: 200px;
    background-image: url(../assets/home_future_icon.png);
    background-repeat: no-repeat;
    background-size: 800px;
    transform-style: preserve-3d;
    transition: transform 1s;
    transform: rotateY(0deg)
}

.it1 .F {
    background-position: -15px 0;

}

.it1 .B {
    background-position: -9px -190px;
    transform: rotateY(-180deg)
}

.it2 .F {
    background-position: -205px 0;
}

.it2 .B {
    background-position: -205px -190px;
    transform: rotateY(-180deg)
}

.it3 .F {
    background-position: -396px 0;
}

.it3 .B {
    background-position: -396px -190px;
    transform: rotateY(-180deg)
}

.it4 .F {
    background-position: -590px 0;
}

.it4 .B {
    background-position: -590px -190px;
    transform: rotateY(-180deg)
}

.body-1-3-i:hover {
    box-shadow: 0 0 4px 0 #ccc;
    color: #ff0;
    transition: all .5s;
}

.it1:hover .F,
.it2:hover .F,
.it3:hover .F,
.it4:hover .F {
    transform: rotateY(-180deg);
}

.it1:hover .B,
.it2:hover .B,
.it3:hover .B,
.it4:hover .B {
    transform: rotateY(0deg);
}

.body2 {
    height: 600px;
    text-align: center;
    background-image: url(../assets/home_project_bg.png);
    background-repeat: no-repeat;
}

.b2section {
    padding: 40px 0 0 10px;

}

.body2 .section .body2head {
    color: #fff;
}

.body2-content {
    width: 500px;
    height: 390px;
    background-image: url(../assets/home_project3.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 10px auto;
    position: relative;
}

.b2c-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: .5s;
}

.body2-content img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
    transform: scale(.1) rotate(0deg);
    transition: .5s;
}

.b2c-bg>p {
    font-size: 30px;
    color: #fff;
    padding-top: 140px;
    opacity: 0;
}

.b2c-bg p:nth-child(2) {
    font-size: 20px;
    padding-top: 30px;
}

.body2-content:hover .b2c-bg {
    opacity: 1;
}

.body2-content:hover img {
    opacity: 1;
    transform: scale(1) rotate(180deg);
}

.body2-content:hover p {
    opacity: 1;
}

.body3 {
    text-align: center;
}

.b3-content {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    padding-top: 50px;
    display: flex;
    justify-content: space-around;
}

.b3c1,
.b3c1-up,
.b3c1-down {
    width: 200px;
    height: 300px;
}

.b3c1 {
    position: relative;
    overflow: hidden;
}

.b3c1-up {
    position: absolute;
    top: -300px;
    background-color: rgba(0, 0, 0, .5);
    transition: .5s;
}

.b3c1-up>div {
    background-image: url(../assets/home_bottom.png);
    background-position: -36px -101px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin: 50px 0 0 20px;
}

.b3c1-up p:nth-child(2) {
    color: #ff0;
    font-size: 24px;
    width: 100px;
    padding: 10px 0 0 18px;
}

.b3c1-up p:nth-child(3) {
    color: #fff;
    font-size: 14px;
    padding: 36px 0 0 9px;
}

.b3c1d-text {
    width: 150px;
    color: #fff;
    font-size: 24px;
    background-color: rgba(19, 103, 171, .8);
    position: absolute;
    top: 30px;
}

.b3c1-down {
    background-image: url(../assets/home_corporate_culture1.png);
    background-size: 110%;
    transition: .3s;
}

.b3c1:hover .b3c1-up {
    top: 0;
}

.b3c1:hover .b3c1d-text {
    display: none;
}

.b3c1:hover .b3c1-down {
    background-position: -20px 0;
}

.body4 .content {
    height: 370px;
    background-color: #ccc;
    background-image: url(../assets/cooper_01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
</style>
